<template>
  <view class="tabbar" v-if="isHidden" :style="`height:${height}rpx;`">
    <view class="tabbar_list">
      <view class="tabbar_list_tab" @click="change(item.name, indexs)"
        :style="`width:${tabWidth}%; font-size:${tabSize}rpx`" v-for="item, indexs in list" :key="indexs">
        <view class="tabbar_list_tab_img">
          <image class="tabbar_list_tab_setimg" v-if="tabIndex === item.name" :src="item.selectedIconPath"></image>
          <image class="tabbar_list_tab_setimg" v-else :src="item.iconPath"></image>
        </view>
        <view class="tabbar_list_tab_title" :class="tabIndex === item.name && 'tabbar_list_tab_active'">{{ item.text }}
        </view>
      </view>
    </view>
  </view>
  <!--   -->
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import { componentsStore } from '@/store/modules/components'
import { onLoad, onShow, onHide, onShareAppMessage } from "@dcloudio/uni-app";
export interface Props {
  height?: string | number,
  styleCss?: any,
  tabWidth?: string | number,
  tabSize?: string | number,
}
const store = componentsStore()
const tabIndex = ref<string | number>(store.toolbarIndex)
const isHidden = ref<boolean>(true)
const props = withDefaults(defineProps<Props>(), {
  height: 100,
  styleCss: { left: 0, bottom: 0 },
  tabWidth: 30,
  tabSize: 24

})
const list = reactive(
  [
    {
      "text": "首页",
      name: 'index',
      "pagePath": "../../pages/index/index",
      "iconPath": "https://taoaiimage.oss-cn-shanghai.aliyuncs.com/file/index.png",
      "selectedIconPath": "https://taoaiimage.oss-cn-shanghai.aliyuncs.com/test/home_1.png"
    },
    {
      "text": "抢购",
      name: 'fudai',
      "pagePath": "../../pages/blessing/index",
      "iconPath": "https://taoaiimage.oss-cn-shanghai.aliyuncs.com/test/wallet_1.png",
      "selectedIconPath": "https://taoaiimage.oss-cn-shanghai.aliyuncs.com/test/wallet_2.png"
    },
    {
      "text": "我的",
      name: 'user',
      "pagePath": "../../pages/user/index",
      "iconPath": "https://taoaiimage.oss-cn-shanghai.aliyuncs.com/file/user_s.png",
      "selectedIconPath": "https://taoaiimage.oss-cn-shanghai.aliyuncs.com/test/user_1.png"
    },

  ]
)
store.$subscribe((item, Node) => {
  tabIndex.value = Node.toolbarIndex
})
watch(tabIndex, (val) => {
  tabIndex.value = val
}, { deep: true, immediate: true })
const change = ((indexs: string, Node) => {
  list.map(item => {
    if (indexs === item.name) {
      uni.switchTab({
        url: item.pagePath
      })
      store.isTabbarFn(item.name)
    }
  })
})
onShow(() => {
  let pages = getCurrentPages()
  const list = ['pages/index/index', 'pages/blessing/index', 'pages/user/index']
  let view: any = pages[pages.length - 1]
  if (list.includes(view.route)) {
    isHidden.value = true
  } else {
    isHidden.value = false
  }
})
</script>
<style scoped lang="scss">
@import './BTabbar.scss'
</style>